<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>原神抽卡记录导出工具</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-dark bg-info navbar-expand-md">
        <div class="container">
            <span class="navbar-brand mb-0 h1">原神抽卡记录导出工具<small> - 支援原神3.0版本</small></span>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        </div>
    </nav>

    <div class="container">
        <div class="mb-2 mt-2">
            <b-form inline onsubmit="return false">
                <b-button-group class="mr-2">
                    <label :class="{disabled:!connected}" class="btn btn-success my-0">
                        <b-icon icon="upload"></b-icon>
                        上传data文件
                        <input :disabled="!connected" class="d-none" ref="referenceUpload" id="img" type="file" @change="selectFile">
                    </label>
                    <a :disabled="!hasData" :class="{disabled:!hasData}" class="btn btn-info" :href="downloadJSONUrl" download="data.json">下载JSON数据</a>
                    <b-button :disabled="!connected || !hasData" :class="{disabled:!connected || !hasData}" variant="info" @click="downloadExcel">
                        <b-icon icon="arrow-clockwise" :class="{'b-icon-animation-spin':exporting}"></b-icon>
                        下载Excel
                    </b-button>
                </b-button-group>
                <b-form-checkbox v-model="saveGacha">
                    上传data文件时存储祈愿数据
                </b-form-checkbox>
                <a class="btn btn-link" v-b-modal.help_modal>
                    <b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
                </a>
            </b-form>
            <b-modal id="help_modal" title="帮助" ok-only>
                <p>data文件位置：原神安装目录\Genshin Impact Game\YuanShen_Data\webCaches\Cache\Cache_Data\data_2。</p>
                <p>或：原神安装目录\Genshin Impact Game\GenshinImpact_Data\webCaches\Cache\Cache_Data\data_2。</p>
                <p>如果游戏正在运行，提示data_2文件被占用，在选择文件界面将data_2文件复制一份副本即可。</p>
                <p>如果你进入的是其他人提供的页面，请谨慎选择存储祈愿数据功能，该功能会将你的祈愿数据存储在他的电脑或服务器上，你以后使用时如果有有数据因为超过官方6个月的期限而无法查询，且有存储的数据时，可以补全数据、增加统计样本，但是因为存储的数据没有加密，所以部署该程序的人可以完全获取你的祈愿数据。</p>
            </b-modal>
            <b-alert
                    v-model="showBottom"
                    class="position-fixed fixed-bottom m-0 rounded-0"
                    variant="info"
                    dismissible
            >
                <button class="btn btn-link btn-sm" v-b-modal.info_modal>
                    {{logs[logs.length-1]}}
                </button>
            </b-alert>
            <b-modal id="info_modal" title="记录" ok-only>
                <p class="my-0" v-for="log in logs">{{log}}</p>
            </b-modal>
        </div>


        <div no-body class="mb-4 card" v-if="hasData">
            <header header-tag="header" class="card-header" role="tab">图表</header>
            <div class="collapse show">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12" v-for="(item,index) in gachaData.chart">
                            <div>
                                <i-echarts class="echarts" :option="item.chart" resizable />
                            </div>
                            <div class="chart-desc">
                                <div>共{{item.statistics.allCount}}抽<span v-if="index>0">，已{{item.statistics.missFiveCount}}抽未出5星，{{item.statistics.missFourCount}}抽未出4星</span>。</div>
                                <div :style="{color:colors[0]}">5星共{{item.statistics.fiveArmsCount+item.statistics.fiveCharacterCount}}个，占比{{((item.statistics.fiveArmsCount+item.statistics.fiveCharacterCount)/item.statistics.allCount*100).toFixed(2)}}%。</div>
                                <div :style="{color:colors[3]}">4星共{{item.statistics.fourArmsCount+item.statistics.fourCharacterCount}}个，占比{{((item.statistics.fourArmsCount+item.statistics.fourCharacterCount)/item.statistics.allCount*100).toFixed(2)}}%。</div>
                                <div :style="{color:colors[2]}">3星共{{item.statistics.threeArmsCount}}个，占比{{(item.statistics.threeArmsCount/item.statistics.allCount*100).toFixed(2)}}%。</div>
                                <div v-if="index>0">5星历史记录：<span :style="{color:colors[Math.floor(Math.random()*colors.length)]}" v-for="history in item.statistics.fiveHistory"> {{history}}</span></div>
                                <div>5星平均出率：<span :style="{color:colors[0]}">{{item.statistics.averageFiveCount}}</span></div>
                                <div>4星平均出率：<span :style="{color:colors[3]}">{{item.statistics.averageFourCount}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-5 pb-5" v-if="hasData">
            <b-card no-body>
                <b-tabs>
                    <b-tab title="记录" disabled></b-tab>
                    <b-tab :title="key" :key="key" v-for="(items,key) in gachaData.list">
                            <b-table
                                    :items="items.data"
                                    :fields="key=='角色活动祈愿'?tableConfig.fields2:tableConfig.fields"
                                    :current-page="items.page"
                                    per-page="20"
                                    borderless
                                    striped
                                    hover
                                    class="mb-0"
                            >
                                <template v-slot:cell(gacha_type)="data">
                                    {{ gachaType[data.value] }}
                                </template>
                            </b-table>
                            <b-pagination
                                    v-model="items.page"
                                    :total-rows="items.data.length"
                                    per-page="20"
                                    align="fill"
                                    class="my-0"
                                    first-number
                                    last-number
                            ></b-pagination>
                    </b-tab>
                </b-tabs>
            </b-card>
        </div>
    </div>
</div>
</body>
</html>